import { DynamicTableStoreManager } from "@/components/VTable/classes/DynamicTableStoreManager";

/** 动态表格列 业务处理逻辑混入对象 即vue格式的对象 */
const dynamicTableCol = {
  data() {
    return {
      /** 动态表格处理对象 动态表格处理的业务 均用此对象实现业务
       * 要求在created生命周期内初始化
       */
      dynamicTableHandleObj: null,
    };
  },

  methods: {
    /** 得到动态表格列选项的数组 混入提供一个函数 */
    getSelectedList() {
      return this.dynamicTableHandleObj.getSelectedList();
    },
  },

  computed: {
    /** 是否显示动态表列控制？ */
    isShowDynamicCol() {
      const props = () => this.isDynamicCol;

      const route = () => {
        const {
          meta: { isLocalDefineRouter },
        } = this.$route;

        /** 是否是本地路由？
         * 是的话返回否，不提供动态控制。
         * 否的话就提供，非本地路由就是侧边栏路由，都提供动态表列。
         */
        if (isLocalDefineRouter !== undefined) {
          return !isLocalDefineRouter;
        } else {
          return true;
        }
      };

      /**
       * 这个写法是严格的
       * 只要做了手动的props配置 就严格按照props配置做行为控制
       * 否则在默认不做行为控制的情况下，自动根据路由做自动化控制
       */
      return props() && route();
    },

    /** 当前表格组件 所处父组件的路由 这里将作为动态表格列储存的核心取值
     * 未来可能会出现多个表格组件共用同一个路由key值的情况
     * 如果出现这样的情况，我们一般是需要特殊处理其他的表格，不允许其他的表格提供动态表格列功能
     */
    routeKeyname() {
      return this.$route.path;
    },
  },

  // TODO: 该方法决定了 在一定程度上 需要移除 删除设计不合理的 dynamicTableHandleObj
  watch: {
    /** 监听选择项数组 如果选择项数组的内容该发生了变化，那就同步更新表格配置数组
     * 更新后的表格配置数组 会在beforeUpdate函数的帮助下更新表格 实现勾选更新表格的功能
     */
    "dynamicTableHandleObj.selectedList": {
      deep: true,
      handler(newVal) {
        // 根据已选择的项 重设全部的hidden值
        this.tableColumns.forEach((colConfig) => {
          if (
            this.dynamicTableHandleObj.selectedList.includes(colConfig.prop)
          ) {
            // 如果没有 就会新建该属性
            colConfig.hidden = false;
          } else {
            colConfig.hidden = true;
          }
        });
        // 对操作列做特殊处理 （添加最后一个是否为操作判断）
        if(this.tableColumns[this.tableColumns.length - 1].prop == "operation"){
          this.tableColumns[this.tableColumns.length - 1].hidden = false;
        }
      },
    },
  },

  created() {
    this.dynamicTableHandleObj = new DynamicTableStoreManager(
      this.tableColumns,
      this.routeKeyname
    );
    // 执行一次初始化函数 整理完毕内部全部的数据
    this.dynamicTableHandleObj.init();
  },

  beforeUpdate() {
    // https://blog.csdn.net/my466879168/article/details/107150931
    this.$nextTick(() => {
      // 在数据加载完，重新渲染表格
      /**
       * TODO:
       * 在使用了 element-ui-sticky-table 的api后，该函数经常出现错误
       * 我们应该放弃使用 element-ui-sticky-table ，而不是想着去替换掉该方法。
       * 不是去适应element-ui-sticky-table，而是尽可能用element本身提供的方式。
       * 毕竟element本身是会持续更新的。而element-ui-sticky-table不会。
       */
      this.$refs["table"].doLayout();
    });
  },
};

export default dynamicTableCol;
